<template>
	<statusBarVue />
	<view class="message-page" :style="pageNoHaveBarStyle">
		<view class="header">
			<view class="header-text">
				<uni-badge v-for="(v,i) in tabList" :key="'tab-list-'+i" class="uni-badge-left-margin" :text="v.num"
					absolute="rightTop" :offset="[-3, 2]" size="small" :custom-style="customStyle">
					<view class="box">
						<text :class="active === i ? 'active': '' " @click="active = i">{{v.label}}</text>
					</view>
				</uni-badge>
			</view>
		</view>
		<view class="content" :style="{ height: 'calc('+ pageNoHaveBarStyle.height + ' - 63rpx - 20rpx - 10px)'}">
			<view v-if="active === 0">
				<systemMessVue />
			</view>
			<view v-if="active === 1">
				<noticeMessVue />
			</view>
			<view v-if="active === 2">
				<hotspotMessVue />
			</view>
			<view v-if="active === 3">
				<AIMessVue @update="updateParentValue" />
			</view>
		</view>
	</view>
</template>

<script>
	import statusBarVue from '@/components/statusBar.vue';

	import systemMessVue from '@/messagePages/system/index.vue';
	import noticeMessVue from '@/messagePages/notice/index.vue';
	import hotspotMessVue from '@/messagePages/hotspot/index.vue';
	import AIMessVue from '@/messagePages/ai/index.vue';

	import {
		publics
	} from '@/mixins/publics.js';

	export default {
		mixins: [publics],
		components: {
			statusBarVue,
			systemMessVue,
			noticeMessVue,
			hotspotMessVue,
			AIMessVue
		},
		data() {
			return {
				active: 0,
				customStyle: {
					borderColor: '#FF4C4C',
					backgroundColor: '#FF4C4C'
				},
				tabList: [{
						label: '系统',
						num: 0
					},
					{
						label: '公告',
						num: 0
					},
					{
						label: '热点',
						num: 6
					},
					{
						label: 'AI知识',
						num: 0
					}
				]
			}
		},
		onShareAppMessage(){
			// 监听用户右上角的转发
		},
		onShareTimeline(){
			// 监听用户右上角的分享到朋友圈
		},
		methods: {
			updateParentValue(key) {
				let setTimeOutFn;
				if (key.detail.height > 0) {
					setTimeOutFn = setTimeout(() => {
						this.pageNoHaveBarStyle.height = `calc( ${this.pageNoHaveBarStyle.height} + 50px )`;
						console.log(1, this.pageNoHaveBarStyle)
					}, 200);
				} else {
					clearTimeout(setTimeOutFn)
				}
			}
		}
	}
</script>

<style lang="scss">
	.message-page {
		position: relative;
		left: 0;
		right: 0;
		z-index: 99;
		background-image: linear-gradient(158deg, transparent 0%, #def1f5bf 21%, #F5F6FA 89%);

		.header {
			width: 100%;
			height: 63rpx;
			display: flex;
			align-items: center;
			padding-bottom: 20rpx;

			&-text {
				display: flex;
				align-items: center;
				// padding-top: 20rpx;
				// height: 30rpx;

				.uni-badge-left-margin {
					font-family: PingFangSC-SNaNpxibold;
					font-weight: bold;
					font-size: 17px;
					color: #50585F;
					margin: 0 20rpx;

					.box>text {
						&.active {
							font-size: 20px;
							color: #1E1F23;
						}
					}
				}
			}
		}

		.content {
			&>view {
				height: 100%
			}

			;
		}

	}
</style>